<template>
  <div>
    <div class="mui-numbox" data-numbox-min="1" :data-numbox-max="max">
      <div
        class="mui-btn mui-btn-numbox-minus"
        type="button"
        style="vertacal-align: middle"
      >
        <span>-</span>
      </div>
      <input
        type="number"
        class="mui-input-numbox"
        value="1"
        id="test"
        @change="changed"
        ref="num"
      />
      <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
    </div>
  </div>
</template>

<script>
import mui from "../../../lib/mui/js/mui.js";
export default {
  data() {
    return {};
  },
  methods: {
    changed() {
      const val = this.$refs.num.value;
      this.$emit("func", parseInt(val));
    },
  },
  mounted() {
    // 初始化数字框
    mui(".mui-numbox").numbox();
  },
  props: ["max"],
  watch: {
    // 不论外界传递给 max 的值是什么，最终，最后传递的那个 max 值，肯定是一个合法的数值
    // 每当监听到max值改变的时候，不论这个值是否合法，我们都将重新为 数字框 使用 JS Api 来手动设置最大值
    max: function (newValue, oldValue) {
      mui(".mui-numbox").numbox().setOption("max", newValue);
    },
  },
};
</script>

<style scoped>
.mui-numbox .mui-btn-numbox-minus,
.mui-numbox .mui-numbox-btn-minus {
  line-height: 33px;
}
.mui-numbox {
  margin-left: 10px;
  margin-top: -7px;
}
</style>